<template>
	<view class="my-container" :class="skinStyle">
		<view class="tui-mybg-box">
			<!-- <image class="bgimg" src="~@/static/img/myBack.png" mode="scaleToFill"></image> -->
			<view class="tui-header-center">
				<view class="headerRight">
					<view class="headerImg">
						<image v-if="isHaveMember=='1'||isMember=='yes'" class="crown" src="~@/static/img/crown.png"></image>
						<image :src="url" class="tui-avatar"
							@tap="navTo('/packageA/pages/mySetup/mySetup', {login: true})"></image>
					</view>
					<view class="tui-userMobile" v-if="customerInfo&&customerInfo.customer" style="margin-left: 30rpx;">
						<view class="agencyId" v-if="customerInfo&&customerInfo.customer && customerInfo.customer.nickName">
							微信昵称：{{customerInfo.customer.nickName}}
						</view>
						<text class="memberCodeWord" v-if="customerInfo && customerInfo.customer && customerInfo.customer.memberCode">
							<!-- {{getShopUserInfo()}} -->
							ID<text>：{{ customerInfo.customer.memberCode }}</text>
						</text>
					</view>
				</view>

				<view class="erweima" @tap="jumpPersonalInfo">
					<view class="" style="font-size: 30rpx;">个人资料</view>
					<view class="iconfont iconxiangyou"></view>
				</view>
			</view>
			<!-- <view class="tui-info" v-if="customerInfo && customerInfo.customer && customerInfo.customer.memberCode">
				<view class="tui-nickname">
					ID<text>:{{ customerInfo.customer.memberCode }}</text>
				</view>
			</view> -->
			<view class="tui-btn-edit">
				<!-- <view class="iconfont iconlingdang3 notice-icon" @tap="navTo('/packageB/pages/noticePage/noticePage', { login: true })">
					<view v-if="unReadFlag" class="notice-point"></view>
				</view>
				<view class="iconfont iconshezhi1" @tap="editInfo(userInfo.telphone)"></view> -->
				<view class="rightTop notice-icon"
					@tap="navTo('/packageB/pages/noticePage/noticePage', { login: true })">
					<image src="../../static/img/notice.png" mode="" class="rightTopImg"></image>
					<view v-if="unReadFlag" class="notice-point"></view>
					<!-- <view class="notice-point"></view> -->
				</view>
				<view class="rightTop" @tap="editInfo(userInfo.telphone)">
					<image src="../../static/img/setUp.png" mode="" class="rightTopImg"></image>
				</view>
			</view>
			<!-- <view class="tui-charm">
				<view class="tui-nickname">
					<text>ID：</text>
					<text>{{ customerInfo.customer.memberCode }}</text>
					<view class="detail-charm"></view>
				</view>
			</view> -->
		</view>
		<view class="tui-content-mybox">
			<view class="tui-box-my tui-order-box">
				<!-- <tui-list-cell :arrow="true" padding="0" :lineLeft="false" @click="viewOrder(0)"> -->
				<view class="tui-cell-header" @tap="viewOrder(0)">
					<view class="tui-cell-title">我的订单</view>
					<view class="tui-cell-sub">查看全部<text class="iconfont iconxiangyou"></text></view>
				</view>
				<!-- </tui-list-cell> -->
				<view class="tui-order-list">
					<!-- <view class="tui-order-item" v-for="(item, index) in orderListBtns1" :key="index" @tap="viewOrder(item.tab)">
						<view class="tui-icon-box">
							<view class="iconfontImg" >
								<image :src="item.icon" mode=""></image>
							</view>
							<view class="tui-badge tui-badge-red" v-if="item.badge !== 0">{{ item.badge }}</view>
						</view>
						<view class="tui-order-text">{{ item.text }}</view>
					</view> -->
					<view class="tui-order-item" @tap="viewOrder(1)">
						<view class="tui-icon-box">
							<view class="iconfontImg w1">
								<image src="~@/static/img/daifukuan.png" mode="heightFix"></image>
							</view>
							<view class="tui-badge tui-badge-red" v-if="daifukuan !== 0">{{ daifukuan }}</view>
						</view>
						<view class="tui-order-text">待付款</view>
					</view>
					<view class="tui-order-item" @tap="viewOrder(2)">
						<view class="tui-icon-box">
							<view class="iconfontImg w1">
								<image src="~@/static/img/daifahuo.png" mode="heightFix"></image>
							</view>
							<view class="tui-badge tui-badge-red" v-if="daifahuo !== 0">{{ daifahuo }}</view>
						</view>
						<view class="tui-order-text">待发货</view>
					</view>
					<view class="tui-order-item" @tap="viewOrder(3)">
						<view class="tui-icon-box">
							<view class="iconfontImg w2">
								<image src="~@/static/img/daishouhuo.png" mode="heightFix"></image>
							</view>
							<view class="tui-badge tui-badge-red" v-if="daishouhuo !== 0">{{ daishouhuo }}</view>
						</view>
						<view class="tui-order-text">待收货</view>
					</view>
					<view class="tui-order-item" @tap="viewOrder(4)">
						<view class="tui-icon-box">
							<view class="iconfontImg w3">
								<image src="~@/static/img/daipingjia.png" mode="heightFix"></image>
							</view>
							<view class="tui-badge tui-badge-red" v-if="daipingjia !== 0">{{ daipingjia }}</view>
						</view>
						<view class="tui-order-text">待评价</view>
					</view>
					<view class="tui-order-item" @tap="viewOrder(5)">
						<view class="tui-icon-box">
							<view class="iconfontImg w4">
								<image src="~@/static/img/shouhou.png" mode="heightFix"></image>
							</view>
							<view class="tui-badge tui-badge-red" v-if="shouhou !== 0">{{ shouhou }}</view>
						</view>
						<view class="tui-order-text">退款/售后</view>
					</view>
					<view class="tui-order-item" @tap="viewOrder(6)">
						<view class="tui-icon-box">
							<view class="iconfontImg w4">
								<image src="~@/static/img/tuan.png" mode="heightFix"></image>
							</view>
							<!-- <view class="tui-badge tui-badge-red"></view> -->
						</view>
						<view class="tui-order-text">我的团购</view>
					</view>
				</view>

			</view>
			<!-- v-if="drCodeApplyFlg==1" -->
			<view  v-if="drCodeApplyFlg==1" class="vipImgBox" @tap="jumpTo('apply')">
				<!-- <image class="vipImg" src="../../static/img/drvip.png" mode="widthFix"></image> -->
				<image class="vipImg" src="../../static/img/drvip.png" mode="widthFix"></image>
			</view>
			<view class="tui-box-my tui-coupon-box">
				<view class="tui-cell-header">
					<view class="tui-cell-title">常用工具</view>
				</view>
				<view class="tui-padding-dr">
					<view class="tui-order-item" @tap="jumpTo('coupon')">
						<!-- 占位假的 -->
						<view class="my-cell-icon">
							<image :src="baseUrl + iconSettings['my_discount']" mode="aspectFill"></image>
						</view>
						<view class="tui-order-text">我的优惠券</view>
					</view>

					<view class="tui-order-item" @tap="navTo('/packageA/pages/myAddress/myAddress', { login: true })">
						<view class="my-cell-icon">
							<image :src="baseUrl + iconSettings['receiving_site']" mode="aspectFill"></image>
						</view>
						<view class="tui-order-text">收货地址</view>
					</view>
					<view class="tui-order-item"
						@tap="navTo('/packageB/pages/myCollection/myCollection', { login: true })">
						<view class="my-cell-icon">
							<image :src="baseUrl + iconSettings['my_collect']" mode="aspectFill"></image>
						</view>
						<view class="tui-order-text">我的收藏</view>
					</view>
					<view class="tui-order-item" @tap="goscratchCard">
						<!-- 占位假的 -->
						<!-- <view class="my-cell-icon">
							 <view class="tui-order-icon iconfont iconyouhuiquan"></view>
						</view>
						<view class="tui-order-text">刮刮乐</view> -->
					</view>
				</view>
			</view>
		</view>

		<!-- <loading></loading> -->
		<tui-modal :show="drCodeModalFlag" :button="drButton" title="申请成功" :content="drCodeContent" @click="drCodeModalClick"
			@cancel="hide"></tui-modal>
		<tui-modal></tui-modal>
		<foot-bar :current="selectedIndex" :skinStyle="skinStyle"></foot-bar>
	</view>
</template>

<script>
	import footBar from '@/components/footbar/footbar';
	import tuiListCell from '@/components/list-cell/list-cell';
	import tuiButton from '@/components/button/button';
	import mixin from '@/utils/mixin.js';
	import {
		mapState
	} from 'vuex';
	export default {
		mixins: [mixin],
		components: {
			footBar,
			tuiListCell,
			tuiButton
		},

		data() {
			return {
				selectedIndex: 3,
				bannerList:['../../static/img/vipImg.png'],
				animationData: {},
				userInfo: {
					name: '',
					telphone: ''
				},
				daifukuan: 0,
				daifahuo: 0,
				daishouhuo: 0,
				daipingjia: 0,
				shouhou:0,
				orderListBtns1: [{
						icon: '~@/static/img/daifukuan.png',
						text: '待付款',
						badge: 0,
						tab: 1
					},
					{
						icon: '~@/static/img/daifahuo.png',
						text: '待发货',
						badge: 0,
						tab: 2
					},
					{
						icon: '~@/static/img/daishouhuo.png',
						text: '待收货',
						badge: 0,
						tab: 3
					}, {
						icon: '~@/static/img/daipingjia.png',
						text: '待评价',
						badge: 0,
						tab: 4
					},
					{
						icon: '~@/static/img/shouhou.png',
						text: '退款/售后',
						badge: 0,
						tab: 5
					},
					{
						icon: '~@/static/img/tuan.png',
						text: '我的团购',
						badge: 0,
						tab: 6
					}
				],
				orderListBtns2: [],
				showSkinFlag: false,
				currentSkin: 0,
				url: '/static/img/mine_def_touxiang_3x.png',
				baseUrl: this.$store.state.imgUrl,
				othersCouponRecommendId: '',
				customerInfo: {
					//用户所有信息
					customerUserId: '',
					headimgurl: '',
					userName: '',
					customersAddressData: []
				},
				isMember: false,
				unReadFlag: false,
				orgLv: uni.getStorageSync('orgLv'),
				position: uni.getStorageSync('orgLvAb'),
				agencyId: uni.getStorageSync('agencyId'),
				isHaveMember: uni.getStorageSync('isHaveMember'),
				drCodeApplyFlg: null, //是否可以申请DR会员
				drCodeModalFlag: false,
				drCodeContent: '',
				drButton:[{
						text: "确定",
						type: "primary",
						plain: false
					}]
			};
		},
		computed: {
			...mapState(['iconSettings'])
		},
		onLoad() {
			// #ifdef H5
			this.$wechat.noShare();
			// #endif
			//经销商及以上
			if (uni.getStorageSync('orgLv') !== 'gk' && uni.getStorageSync('orgLv') !== 'hy' &&
					uni.getStorageSync('orgLv') !== 'dxy') { //不用true,false,防止界面闪现
				this.isMember = 'yes'
			} else {
				this.isMember = 'no'
			}

			this.getShopUserInfo();
			this.userInfo.telphone = uni.getStorageSync('memberTel');
			// this.summarizingFun()
			this.othersCouponRecommendId = uni.getStorageSync('othersCouponRecommendId');

			this.getCustomerInfo();
			// 获取图标设置信息
			this.$util.getIconSetting();

		},
		onShow() {
			this.unRead();
			this.summarizingFun();
		},
		methods: {
			getShopUserInfo() {
				if (this.orgLv === 'jxs') {
					return '经销商'
				} else if (this.orgLv === 'jl') {
					return '经理'
				} else if (this.orgLv === 'bbz') {
					return '本部长'
				} else if (this.orgLv === 'ls') {
					return '理事'
				} else if (this.orgLv === 'fz') {
					return '副总'
				} else if (this.orgLv === 'dxy') {
					return '店销员'
				} else if (this.orgLv === 'hy') {
					return '会员'
				} else {
					return '顾客'
				}
			},
			unRead() { //我的消息未读
				this.$http.unRead().then(res => {
					if (res.status === 0) {
						this.unReadFlag = !res.data.isReadedFlag
					}
				});
			},
			toOrder() {
				uni.navigateTo({
					url: '../../packageA/pages/myOrder/myOrder'
				});
			},
			summarizingFun() {
				this.$http.summarizing().then(res => {
					if (res.status === 0) {
						// this.orderListBtns1[0].badge = Number(res.data.toPayAmount);
						this.daifukuan = Number(res.data.toPayAmount);
						// this.orderListBtns1[1].badge = Number(res.data.toDeliveryOrderAmount);
						this.daifahuo = Number(res.data.toDeliveryOrderAmount);
						// this.orderListBtns1[2].badge = Number(res.data.toAcceptOrderAmount);
						this.daishouhuo = Number(res.data.toAcceptOrderAmount);
						if (res.data.toEvaluateAmount) {
							// this.orderListBtns1[3].badge = Number(res.data.toEvaluateAmount);
							this.daipingjia = Number(res.data.toEvaluateAmount);
						}
						if(res.data.rejectInApplyAmount){
							this.shouhou = Number(res.data.rejectInApplyAmount);
						}
					}
				});
			},

			goWuliu() {
				uni.navigateTo({
					url: '../../packageC/pages/stockManage/stockManage'
				});
			},
			goStock() {
				uni.navigateTo({
					url: '../../packageC/pages/shopProductDetail/shopProductDetail'
				});
			},
			gozhuce() {
				uni.navigateTo({
					url: '/packageA/pages/register/register'
				});
			},
			getCustomerInfo() {
				//获取用户信息
				let params={
					type:3,
				}
				this.$http.customersIncipient(params).then(res => {
					if (res.status === 0) {
						this.customerInfo = res.data;
						this.url = res.data.customer.headimgurl;
						this.drCodeApplyFlg = res.data.drCodeApplyFlg;
					}
				});
			},
			goredPacket() {
				uni.navigateTo({
					url: '../buyer/redPacket/redPacket'
				});
			},
			gocoupon() {
				uni.navigateTo({
					url: '../buyer/coupon/coupon'
				});
			},
			goTurntable() {
				uni.navigateTo({
					url: '../buyer/turntable/turntable'
				});
			},
			goscratchCard() {
				uni.navigateTo({
					url: '/packageA/pages/scratchCard/scratchCard'
				});
			},
			editInfo(telphone) {
				uni.navigateTo({
					url: '/packageA/pages/setupAll/setupAll'
				});
			},
			receiveCouponRecommend() {
				const param = {
					couponRecommendId: this.othersCouponRecommendId
				};
				this.$http.receiveCouponRecommend(param).then(res => {
					if (res.success) {
						// this.couponflg=false
						// uni.showToast({
						// 	title: "恭喜您获得新人推荐优惠券",
						// 	icon: "none",
						// 	duration: 1000
						// });
					}
				});
			},
			viewOrder(tabIndex) {
				if (tabIndex === 5) {
					uni.navigateTo({
						url: '/packageA/pages/myOrder/returnOrderList'
					});
				} else if (tabIndex === 6) {
					uni.navigateTo({
						url: '../../packageB/pages/grouponOrder/grouponList'
					});
				} else {
					uni.navigateTo({
						url: '/packageA/pages/myOrder/myOrder?tabIndex=' + tabIndex
					});
				}
			},
			showSkin() {
				this.showSkinFlag = !this.showSkinFlag;
			},
			changeSwiper: function(e) {
				this.currentSkin = e.detail.current;
			},
			switchSkin(skinStyle, index) {
				this.skinStyle = skinStyle;
				let skinItem = {
					skinStyle: skinStyle,
					index: index
				};
				uni.setStorageSync('skinItem', skinItem);
			},
			jumpTo(tag) {
				if (tag === 'address') {
					// let addressData = JSON.stringify(this.customerInfo.customersAddressData);
					uni.navigateTo({
						url: '/packageA/pages/myAddress/myAddress'
					});
				} else if (tag === 'apply') {
					this.$http.drCodeApply().then((res) => {
						if (res.status === 0) {
							let step = res.data.step;
							let vipMemberName = res.data.vipMemberName;
							if (step == 1 || step == 2 || step == 3) {
								uni.navigateTo({
									url: `/packageB/pages/exclusiveMember/memberInfo?step=${step}&vipMemberName=${vipMemberName}`
								});
							} else if (step == 4) {
								this.drCodeModalFlag = true;
								this.drCodeContent = `您的DR码为：${res.data.grantStaffId}`;
							}else if (!step){
								//判断是否买了套餐
								uni.navigateTo({
									url: '/packageB/pages/exclusiveMember/memberApply'
								});
							}
						}
					})
					
				}else if (tag === 'coupon') {//跳转到优惠券
					// #ifdef H5
					if (this.$wechat.isIOS()) {
						window.location.href = '/h5/packageB/pages/coupon/couponList'
					} else {
						uni.navigateTo({
							url: '/packageB/pages/coupon/couponList'
						})
					}
					// #endif
					// #ifndef H5
					uni.navigateTo({
						url: '/packageB/pages/coupon/couponList'
					})
					// #endif
				}
			},
			drCodeModalClick(e) {
				this.hide();
			},
			hide() {
				this.drCodeModalFlag = false
			},
			jumpPersonalInfo() {
				let stopFunctionArr = this.$store.state.dictDataAll['stopFunction'];
				let stopFunItem1 = null; //当前对象
				let stopFunItem2 = null; //message对象
				let stopFunItemArr = stopFunctionArr.filter((item) => {
					return (item.dictLabel == 'function9' || item.dictLabel == 'message')
				});
				if (stopFunItemArr[0].dictLabel == 'function9') {
					stopFunItem1 = stopFunItemArr[0];
					stopFunItem2 = stopFunItemArr[1];
				} else {
					stopFunItem2 = stopFunItemArr[0];
					stopFunItem1 = stopFunItemArr[1];
				}
				if (stopFunItem1.dictValue == '0') { //开启
					uni.navigateTo({
						url: '/packageA/pages/mySetup/mySetup'
					})
				} else { //关闭
					let titleTips = stopFunItem2.dictValue
					uni.showToast({
						icon: 'none',
						title: titleTips,
						duration: 2000,
					})
				}
			
			}
		}
	};
</script>

<style lang="scss">
	
	.my-container {
		padding-top: 345rpx;
		height: 100vh;

		.iconbg4 {
			background: linear-gradient(135deg, #ff9a9e, #fecfef);
		}

		.iconbg5 {
			background: linear-gradient(135deg, #a18cd1, #fbc2eb);
		}

		.tui-badge-red {
			min-width: 32rpx;
			right: -8rpx;
			top: -10rpx;
		}
	}

	.borderBottom {
		border-bottom: 2rpx solid $borderColor;
	}

	.erweima {
		display: flex;
		color: #333;

		.iconfont {
			font-size: 40rpx;
		}
	}

	.iconfontImg {
		height: 48rpx;
		&.w1{
			width: 54rpx;
		}
		&.w2{
			width: 58rpx;
		}
		&.w3{
			width: 52rpx;
		}
		&.w4{
			width: 50rpx;
		}
		image {
			width: 100%;
			height: 100%;
		}
	}

	.vipImgBox {
		width: 100%;
		height: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: $bg;

		.vipImg {
			width: 90%;
			margin-top: 18rpx;
		}
	}

	.tui-info {
		width: 100%;
		padding-left: 30rpx;
		color: #333;
		box-sizing: border-box;
		display: flex;
		margin-top: 30rpx;
		// align-items: center;
		justify-content: start;
		height: 32rpx;
	}

	.tui-charm {
		width: 100%;
		padding-top: 42rpx;
		padding-left: 40rpx;
		color: #333;
		box-sizing: border-box;
	}

	.tui-order-box {
		// height: 350rpx;
		padding-bottom: 20rpx;
		border-bottom: 16rpx solid #f7f7f7;
	}

	.tui-cell-sub {
		font-size: 28rpx;
		font-weight: 400;
		color: #999;
		// padding-right: 28rpx;
	}

	.tui-order-list {
		width: 100%;
		height: 130rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.notice-icon {
		position: relative;

		.notice-point {
			position: absolute;
			left: 37rpx;
			top: -4rpx;
			width: 14rpx;
			height: 14rpx;
			background-color: $red;
			border-radius: 50%;
		}

	}

	.tui-mybg-box {
		width: 100%;
		height: 42%;
		// background-image: url(~@/static/img/myBack.png) no-repeat;
		// background: url(~@/static/img/loginbg.png) no-repeat;
		background-image:linear-gradient(to right,#E5E7EF,#F2F3F7);
		background-size: 100% 100%;
		position: absolute;
		left: 0;
		top: 0;
		box-sizing: border-box;

		.bgimg {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			z-index: -1;
		}
	}

	.tui-box-my {
		width: 100%;
		background: #fff;
		box-shadow: 0 3rpx 20rpx rgba(183, 183, 183, 0.1);
		border-radius: 50rpx 50rpx 0 0;
		padding-top: 20rpx;
		overflow: hidden;
	}


	.my-container .tui-content-mybox {
		width: 100%;
		// padding: 0 16rpx;
		box-sizing: border-box;
		position: relative;
		top: 0rpx;
		z-index: 10;
	}


	.tui-header-center {
		width: 100%;
		height: 110rpx;
		margin-top: 140rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		// align-items: center;
		justify-content: space-between;
		align-items: center;

		.headerImg {
			position: relative;
			.tui-avatar{
				box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.12);
			}
			
			.crown {
				width: 100rpx;
				height: 60rpx;
				position: absolute;
				top: -44rpx;
				left: 50%;
				margin-left: -50rpx;
				z-index: 10;
			}
		}

	}

	.tui-btn-edit {
		flex-shrink: 0;
		font-size: 36rpx;
		position: absolute;
		top: 25rpx;
		right: 25rpx;
		padding: 10rpx;
		width: 125rpx;
		display: flex;
		justify-content: space-between;

		.rightTop {
			width: 40rpx;
			height: 40rpx;

			.rightTopImg {
				width: 100%;
				height: 100%;
			}
		}

		.iconfont {
			font-size: 36rpx;
			// background-color: rgba(255,255,255,.5);
			width: 54rpx;
			height: 54rpx;
			line-height: 54rpx;
			border-radius: 50%;
			color: #585858;
			text-align: center;
			box-shadow: 0 0 20rpx solid #ccc;
			color: #fff;
		}

		.yellow {
			color: #f4b406;
		}
	}

	

	.tui-coupon-box {
			border-radius: 0 !important;
		}
	
		.tui-padding-dr {
			width: 100%;
			// height: 130rpx;
			padding: 20rpx 10rpx;
			box-sizing: border-box;
			overflow: hidden;
		}
	
		.tui-order-item {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			float: left;
		}
	
		.tui-icon-box {
			position: relative;
		}
	
		.tui-order-icon {
			width: 52rpx;
			height: 52rpx;
			font-size: 46rpx;
			display: block;
			color: #ea655e;
		}
	
		.tui-order-text,
		.tui-tool-text {
			font-size: 26rpx;
			font-weight: 400;
			color: #111;
			padding-top: 15rpx;
		}
	
		.tui-tool-text {
			font-size: 24rpx;
		}
		.headerRight {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	.vipImgSwiper{
		width: 100%;
		height: 100%;
	}
</style>
